<template>
  <view class="container">
    <uv-navbar
      title="新建优惠劵"
      bg-color="none"
      @leftClick="leftClick"
    ></uv-navbar>
    <view class="coupon-box">
      <view class="tab">
        <view class="tab-list">
          <view
            class="tab-item"
            :class="{ active: index == tab.active }"
            v-for="(item, index) in tab.list"
            :key="item.value"
            @click="ckTab(index)"
            >{{ item.title }}</view
          >
        </view>
      </view>
      <uv-form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="form"
        labelWidth="0"
      >
        <view class="form-box">
          <template v-for="item in formList">
            <view v-if="item.state.includes(tab.active)" :key="item.id">
              <view class="name">
                <text class="dy-iconfont" :class="item.icon"></text>
                {{ item.title }}
              </view>
              <uv-form-item :prop="item.id">
                <view class="content" v-if="item.type == 'number'">
                  <uv-input
                    v-model="form[item.id]"
                    :placeholder="item.title"
                    border="none"
                  ></uv-input>
                </view>
                <view
                  class="content"
                  v-else-if="item.type == 'select'"
                  @click="showSexSelect(item.id)"
                >
                  <uv-input
                    v-model="form[item.id]"
                    disabled
                    disabledColor="none"
                    :placeholder="item.title"
                    border="none"
                  ></uv-input>
                </view>
                <template v-slot:right v-if="item.type == 'select'">
                  <view class="icon-right">
                    <uv-icon name="arrow-down"></uv-icon>
                  </view>
                </template>
              </uv-form-item>
            </view>
          </template>
        </view>
      </uv-form>
    </view>
    <uv-action-sheet
      ref="sexSelect"
      :actions="actions.columns"
      :title="actions.title"
      @select="sexSelect"
    ></uv-action-sheet>

    <view class="button-fb" @click="onSubmit">保存提交</view>
  </view>
</template>

<script>
import { addCoupon } from "@/common/api";
const app = getApp();
export default {
  data() {
    return {
      tab: {
        active: 0,
        list: [
          {
            title: "满减劵",
            value: 0,
          },
          {
            title: "无门槛劵",
            value: 1,
          },
        ],
      },
      actions: {
        id: "",
        title: "",
        columns: [],
      },
      formList: [
        {
          title: "优惠金额",
          icon: "icon-mimabukejian1",
          id: "discounts",
          state: [1],
          type: "number",
        },
        {
          title: "满多少钱",
          icon: "",
          id: "full",
          state: [0],
          type: "number",
        },
        {
          title: "减多少钱",
          icon: "",
          id: "subtract",
          state: [0],
          type: "number",
        },
        {
          title: "领取后有效天数",
          icon: "",
          id: "valid",
          state: [0, 1],
          type: "number",
        },
        {
          title: "每人限领",
          icon: "",
          id: "astrict",
          state: [0, 1],
          type: "select",
        },
        {
          title: "使用范围",
          icon: "",
          id: "scope",
          state: [0, 1],
          type: "select",
        },
      ],
      form: {
        discounts: "",
        full: "",
        subtract: "",
        valid: "",
        astrict: "不限",
        scope: "不限",
      },
      rules: {
        discounts: {
          type: "number",
          required: true,
          message: "优惠金额必填，长度限10个字符",
          trigger: ["blur", "change"],
        },
        full: {
          type: "number",
          required: true,
          message: "满多少钱必填，长度限10个字符",
          trigger: ["blur", "change"],
        },
        subtract: {
          type: "number",
          required: true,
          message: "减多少钱必填，长度限10个字符",
          trigger: ["blur", "change"],
        },
        valid: {
          type: "number",
          required: true,
          message: "减多少钱必填，长度限10个字符",
          trigger: ["blur", "change"],
        },
        astrict: {
          type: "string",
          required: true,
          message: "请选择限领数量",
          trigger: ["change"],
        },
        scope: {
          type: "string",
          required: true,
          message: "请选择使用范围",
          trigger: ["change"],
        },
      },
    };
  },
  methods: {
    leftClick() {
      app.navigateBack();
    },
    ckTab(index) {
      if (this.tab.active != index) {
        this.$refs.form.clearValidate();
        this.tab.active = index;
      }
    },
    showSexSelect(id) {
      (this.actions =
        id == "astrict"
          ? {
              id,
              title: "请选择限领数量",
              columns: [
                {
                  name: "不限",
                },
                {
                  name: "1",
                },
                {
                  name: "2",
                },
                {
                  name: "3",
                },
                {
                  name: "4",
                },
                {
                  name: "5",
                },
              ],
            }
          : {
              id,
              title: "请选择使用范围",
              columns: [
                {
                  name: "不限",
                },
              ],
            }),
        setTimeout(() => {
          this.$refs.sexSelect.open();
          uni.hideKeyboard();
        }, 50);
    },
    sexSelect(e) {
      this.form[this.actions.id] = e.name;
    },
    onSubmit() {
      this.$refs.form
        .validate()
        .then((res) => {
          console.log(res);
          let data = {
            couponType: this.tab.active + 1,
            discountMoney: this.form.discounts,
            satisfyMoney: this.form.full,
            reduceMoney: this.form.subtract,
            validDays: this.form.valid,
            limitNum: this.form.astrict == "不限" ? 0 : this.form.astrict,
            rangeNum: this.form.scope == "不限" ? 0 : this.form.scope,
            merchantId: this.$store.state.user.wx_merchantInfo.id,
          };
          console.log(data);

          addCoupon(data)
            .then((res) => {
              console.log(res);
              this.reset();
              uni.showToast({
                icon: "success",
                title: "新增成功",
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((errors) => {
          console.log(errors);
        });
    },
    reset() {
      this.form.discounts = "";
      this.form.full = "";
      this.form.subtract = "";
      this.form.valid = "";
      this.form.astrict = "不限";
      this.form.scope = "不限";
      this.$refs.form.clearValidate();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  min-height: 100vh;
  width: 100vw;
  padding: 40rpx;
  padding-top: 226rpx;
  // padding-bottom: calc(96rpx + 32rpx + 22rpx);
  box-sizing: border-box;
  background: #f7f8fa;
  background: radial-gradient(
    128% 128% at 95% 0%,
    #d7ceff 0%,
    #bbe1ff 62%,
    #ffffff 95%
  );

  .button-fb {
    position: fixed;
    bottom: 32rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 480rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
    border-radius: 48rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    text-align: center;
  }

  .tab {
    .tab-list {
      height: 120rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      border: 2rpx solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      box-sizing: border-box;

      .tab-item {
        width: 306rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 16rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        text-align: center;

        &.active {
          background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
          color: #ffffff;
        }
      }
    }
  }

  .form-box {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    border: 2rpx solid #ffffff;
    padding: 44rpx 42rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .name {
      .dy-iconfont {
        font-size: 40rpx;
        padding-right: 22rpx;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      width: 100%;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 16rpx;
      padding: 18rpx 20rpx;
      box-sizing: border-box;
      font-weight: 400;
      font-size: 30rpx;
      color: #000000;

      .dy-iconfont {
        font-size: 46rpx;
      }

      input {
        flex: 1;
      }
    }
  }
}

/deep/.uv-form-item__body__right__content {
  position: relative;

  .item__body__right__content__icon {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateX(-50%);
  }
}
</style>
